<script>
  import Counter from '../components/Counter.svelte'
  import Statements from '../components/Statements.svelte'
  import EachComponent from '../components/EachComponent.svelte'
  import AwaitComponent from '../components/AwaitComponent.svelte'
  import EventComponent from '../components/EventComponent.svelte'
  import DomEventForwardingComponent from '../components/DomEventForwardingComponent.svelte'
  import BindComponent from '../components/BindComponent.svelte'
  import BindThisCompontent from '../components/BindThisCompontent.svelte'
  import ComponentComponent from '../components/ComponentComponent.svelte'
  import TickComponent from '../components/TickComponent.svelte'
  import StoreComponent from '../components/StoreComponent.svelte'
  import StoreComponent2 from '../components/StoreComponent2.svelte'

  function handleClickCC(event) {
    // 点击相应孙子组件
    alert(event?.detail)
  }
  function handleClickDomEvent() {
    console.log(123)
  }
</script>

<svelte:head>
  <title>Home</title>
</svelte:head>

<section>
  <ol>
    <li>
      <Counter />
    </li>
    <li>
      <Statements receiveCount={99} />
    </li>
    <li>
      <EachComponent />
    </li>
    <li>
      <AwaitComponent />
    </li>
    <li>
      <EventComponent on:gradesun-message={handleClickCC} />
    </li>
    <li>
      <DomEventForwardingComponent on:click={handleClickDomEvent} />
    </li>
    <li>
      <BindComponent />
    </li>
    <li class="bt-li"><BindThisCompontent /></li>
    <li><ComponentComponent /></li>
    <li><TickComponent /></li>
    <li><StoreComponent /></li>
    <li><StoreComponent2 /></li>
  </ol>
</section>

<style>
  .bt-li {
    height: 100px;
  }
</style>
